<template>
  <div>
    <!-- <h2>图片海报管理</h2> -->
    <Card style="margin-bottom:30px">
      <Form>
        <Row>
          <!-- <Tooltip content placement="right" max-width="600"> -->
          <!-- 上传图片 -->
          <upload-pic-thumb ref="uploadThumb"
                            @on-change="changeAvatar($event)"
                            :multiple="false"></upload-pic-thumb>
          <!-- </Tooltip> -->
          <p>请上传640*1150像素的图片，二维码距离顶部为735像素</p>
        </Row>
        <RadioGroup v-model="uploadFile.state"
                    style="margin-left:0px">
          <Radio label="1"
                 style="margin-left:0px">默认</Radio>
          <Radio label="0"
                 style="margin-left:0px">不默认</Radio>
        </RadioGroup>
        <Input v-model="uploadFile.remark"
               type="text"
               placeholder="请输入备注"
               style="width:300px;margin-left:10px" />
        <Button type="primary"
                @click="handleSubmit"
                style="margin-left:10px">上传海报</Button>
      </Form>
    </Card>
    <Row>
      <Table border
             :columns="columns5"
             :data="data5"></Table>
    </Row>
    <Row type="flex"
         justify="end"
         class="page">
      <Page :current="searchForm.page"
            :total="total"
            :page-size="searchForm.limit"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer></Page>
    </Row>
    <!-- 模态窗 -->
    <Modal v-model="modal2"
           title="编辑海报信息"
           width="400"
           @on-ok="ok2"
           @on-cancel="cancel2">
      <Row style="margin-bottom:20px">
        <RadioGroup v-model="uploadFile2.state"
                    style="margin-left:10px">
          <Radio :label="1"
                 style="margin-left:0px">默认</Radio>
          <Radio :label="0"
                 style="margin-left:0px">不默认</Radio>
        </RadioGroup>
      </Row>
      <Row>
        <Input v-model="uploadFile2.remark"
               type="text"
               placeholder="请输入备注"
               style="width:300px;margin-left:10px" />
      </Row>
    </Modal>
    <!-- 模态窗3 -->
    <Modal v-model="modal3"
           title="删除当前海报"
           width="500"
           @on-ok="ok3"
           @on-cancel="cancel3"></Modal>
  </div>
</template>
<script>
import {
  baseImageList,
  baseImageDetail,
  baseImageUpload,
  baseImageEdit,
  baseImageDelete,
  baseImageDefault,
  imageUpload
} from '@/api/mc/vip.js'
import config from '@/config'
import { getToken, setToken } from '@/libs/util'
import uploadPicThumb from '@/components/tj/upload-pic-thumb.vue'

export default {
  components: {
    uploadPicThumb
  },
  data () {
    return {
      headers: {
        Authorization: ''
      },
      url: 'http://michong.tjo2o.cn/mc/admin/upload-media',
      uploadFile: {
        url: '',
        state: null,
        remark: ''
      },
      // 分页设置
      searchForm: {
        sort: { id: 'desc' },
        page: 1,
        limit: 10
      },
      limit: null,
      total: 0,
      uploadFile2: {
        url: '',
        state: null,
        remark: ''
      },
      columns5: [
        {
          title: 'ID',
          key: 'id',
          align: 'center',
          width: '100'
        },
        {
          title: '海报图片',
          key: 'url',
          align: 'center',
          render (h, params) {
            const { url } = params.row
            return h('img', {
              style: {
                weight: '50px',
                height: '50px'
              },
              attrs: {
                src: url,
                alt: '海报图片'
              }
            })
          }
        },
        {
          title: '是否默认',
          key: 'state',
          align: 'center',
          render (h, params) {
            if (params.row.state == 0) {
              this.statusName = '否'
              return h('p', this.statusName)
            } else if (params.row.state == 1) {
              this.statusName = '是'
              return h('p', this.statusName)
            }
          }
        },
        {
          title: '备注',
          key: 'remark',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'created_at',
          align: 'center'
        },
        {
          title: '操作',
          key: 'option',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    width: '60px'
                  },
                  on: {
                    click: () => {
                      this.modal2 = true
                      this.edit2(params.row)
                      this.handleEdit()
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    width: '60px'
                  },
                  on: {
                    click: () => {
                      this.modal3 = true
                      this.edit3(params.row)
                      this.handleDelBaseImg()
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data5: [],
      modal1: false,
      modal2: false,
      modal3: false,
      rowTemp1: {},
      rowTemp2: {},
      rowTemp3: {}
    }
  },
  created () {
    this.getList()
    this.headers.Authorization = getToken()
  },
  methods: {
    ok () { },
    cancel () { },
    ok2 (e) {
      // 修改海报默认状态和备注
      baseImageEdit(this.rowTemp2.id, this.uploadFile2).then(res => {
        this.$Message.success('修改成功')
        this.getList()
      })
    },
    cancel2 () { },
    // 模态窗3确认
    ok3 () {
      baseImageDelete(this.rowTemp3.id).then(res => {
        this.$Message.success('删除成功')
        this.getList()
      })
    },
    // 模态窗3取消
    cancel3 () { },
    // 选择当前行
    edit2 (e) {
      this.rowTemp2.id = e.id
      console.log('e', e.state)
      this.uploadFile2.state = e.state
      console.log('this.uploadFile2.state', this.uploadFile2.state)

      this.uploadFile2.remark = e.remark
      console.log('选择当前行为', e)
    },
    edit3 (e) {
      this.rowTemp3.id = e.id
      console.log('删除当前行id为', e.id)
    },
    // 上传图片
    changeAvatar (event) {
      if (event && event.response) this.uploadFile.url = event.response.url
    },
    // 上传海报图片按钮
    handleSubmit () {
      if (this.uploadFile.url && this.uploadFile.state) {
        baseImageUpload(this.uploadFile).then(res => {
          this.$Message.success('上传成功')
          this.uploadFile.url = ''
          this.uploadFile.state = ''
          this.uploadFile.remark = ''
          this.getList()
          this.$refs.uploadThumb.handleRemove()
        })
      } else {
        this.$Message.info('请上传图片或选择海报图片状态')
      }
    },
    // 编辑图片
    handleEdit () { },
    // 删除图片
    handleDelBaseImg () {
      this.modal3 = true
    },
    // 获取列表
    getList () {
      this.data5 = []
      baseImageList(this.searchForm).then(res => {
        console.log('初始化数据res', res)
        res.data.map(v => {
          this.data5.push(v)
        })

        this.total = res.meta.pagination.total
      })
    },
    // 分页
    changePage (v) {
      this.searchForm.page = v
      this.getList()
    },
    changePageSize (v) {
      this.limit = v
      this.searchForm.limit = v
      this.getList()
    }
  }
}
</script>
